<!--
 * @Description: 角色管理-列表
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-09-23
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-09-26
-->
<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { message, Modal } from 'ant-design-vue'
  import { onMounted, reactive } from 'vue'

  import { requestDelRole, requestRoleList } from '/@/api/system/ysys-user/role'
  import { RoleTypeDesc } from '/@/api/system/ysys-user/role/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  import Add from './components/Add.vue'
  import Edit from './components/Edit.vue'
  import PermissionRelate from './components/PermissionRelate.vue'

  /** 搜索条件 */
  const searchParam = reactive<RoleListTypes.IRequest>({ roleName: '', roleType: null })

  /** 类型选项 */
  const roleTypeOptions = Object.entries(RoleTypeDesc).map((item) => ({ label: item[1], value: item[0] }))

  /** 表格列配置 */
  const columns = [
    { title: '角色名称', dataIndex: 'roleName' },
    { title: '角色描述', dataIndex: 'roleDesc', customRender: ({ record }) => record.roleDesc || '--' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<RoleListTypes.IRequest, RoleListTypes.IResponse[]>(searchParam, requestRoleList)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.roleName = ''
    searchParam.roleType = null
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /** 新增弹窗 */
  const modalAdd = reactive({
    visible: false,
    success: () => queryList({ current: 1 }),
  })

  /**
   * 新增
   */
  const add = () => (modalAdd.visible = true)

  /** 编辑弹窗 */
  const modalEdit = reactive({
    visible: false,
    roleId: NaN,
    success: () => queryList(),
  })

  /**
   * 编辑
   * @param record 角色
   */
  const edit = (record: RoleListTypes.IResponse) => {
    modalEdit.visible = true
    modalEdit.roleId = record.roleId
  }

  /** 关联权限弹窗 */
  const modalPermissionRelate = reactive({
    visible: false,
    roleId: NaN,
    success: () => queryList(),
  })

  /**
   * 关联权限
   * @param record 角色
   */
  const relatePermission = (record: RoleListTypes.IResponse) => {
    modalPermissionRelate.visible = true
    modalPermissionRelate.roleId = record.roleId
  }

  /**
   * 删除
   * @param record 角色
   */
  const dele = (record: RoleListTypes.IResponse) => {
    Modal.confirm({
      title: '删除',
      content: '确定删除该角色？',
      onOk: async () => {
        const { responseCode } = await requestDelRole({ roleId: record.roleId })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('删除成功')
          queryList()
        }
      },
    })
  }
</script>

<template>
  <div class="ssc-list role-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="角色名称">
            <a-input v-model:value="searchParam.roleName" :maxlength="20" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="类型">
            <a-select v-model:value="searchParam.roleType" :options="roleTypeOptions" placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">角色管理</span>
        <a-button type="primary" @click="add()">
          <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
          新建
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="edit(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="relatePermission(record)">关联权限</a>
              <a-divider type="vertical" />
              <a class="color-error" @click="dele(record)">删除</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="modal">
      <Add v-model:visible="modalAdd.visible" @success="modalAdd.success" />
      <Edit v-model:visible="modalEdit.visible" :role-id="modalEdit.roleId" @success="modalEdit.success" />
      <PermissionRelate v-model:visible="modalPermissionRelate.visible" :role-id="modalPermissionRelate.roleId" @success="modalPermissionRelate.success" />
    </div>
  </div>
</template>

<style lang="less" scoped>
  .color-error {
    color: @error-color;
  }
</style>
